这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

前言

上一篇文章介绍了大概一半的 nuxt3 特性，这一篇会介绍另外一半

我也是第一次使用 nuxt3 来开发项目

踩到的坑还是很多的，预计可以写一篇踩坑记录

过渡

Nuxt 利用 Vue 的 <Transition> 组件来应用页面和布局之间的转换。

只需要在 nuxt config 里设置

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  },
})

然后在 app.vue 里设置你想要的过渡动画

<template>
  <NuxtPage />
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

类名必须是这几个

就可以实现一个切换页面有虚化效果的动画

更高级的用法详见官方文档

https://nuxt.com/docs/getting-started/transitions

使用 Api 获取数据

nuxt3 自带一个 vueuse 里的 useFetch api

使用方法为

<script setup>
const { data: count } = await useFetch('/api/count')
</script>

<template>
  Page visits: {{ count }}
</template>

可以使用 useAsyncData 来异步获取数据

<script setup>
const { data } = await useAsyncData('count', () => $fetch('/api/count'))
</script>

<template>
  Page visits: {{ data }}
</template>

更高级的用法详见官方文档

https://nuxt.com/docs/getting-started/data-fetching

状态管理

nuxt3 提供了 vueuse 的一个 api 叫 useState 来实现全局状态管理

无需创建 state 文件

直接使用

<script setup>
const counter = useState('counter', () => Math.round(Math.random() * 1000))
</script>

<template>
  <div>
    Counter: {{ counter }}
    <button @click="counter++">
      +
    </button>
    <button @click="counter--">
      -
    </button>
  </div>
</template>

这个例子创建了一个 state 叫 counter 里面默认记录了一个随机数

点击按钮会让随机数进行加减

useState 默认为响应式 很方便

nuxt3 的 auto import 特性可以使 state 简写为

const counter = useCounter() // Same as useState('counter')

错误处理

nuxt 提供了很多高级的错误处理方式

一个最简单的 api 是 useError

const error = useError()

这句代码可以快速的抛出一条错误

也可以使用 createError 方法

<script setup>
const route = useRoute()
const { data } = await useFetch(`/api/movies/${route.params.slug}`)
if (!data.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}
</script>

部署

正常的使用 nuxt build 命令会生成一个在 node 环境中运行的运行时

.mjs文件

node .output/server/index.mjs

即可运行

$ node .output/server/index.mjs
Listening on http://localhost:3000

可以设置环境变量例如

PORT=3001 node .output/server/index.mjs

在 3001 端口运行

在 nuxt.config 里添加

export default {
  nitro: {
    preset: 'node-server'
  }
}

或者 NITRO_PRESET=node-server nuxt build

preset 字段可以更改生成的代码的依赖平台

支持的平台有

• AWS
• Azure
• Cleavr
• CloudFlare
• Digital Ocean
• Firebase
• heroku
• Edgio
• Netlify
• Render
• Stormkit
• Vercel

测试

可以添加 vitest 库来进行测试

yarn add --dev @nuxt/test-utils vitest

方法如下

新建 test 目录 创建文件 demo.test.ts

import { describe, test } from 'vitest'
import { setup, $fetch } from '@nuxt/test-utils'

describe('My test', async () => {
  await setup({
    // test context options
  })

  test('my test', () => {
    // ...
  })
})

运行 vitest 即可获得通过或不通过提示

结尾

到这里 nuxt3 基础就几乎结束了

还有一些更高级的用法没有讲，例如生命周期啊，nuxt-kit 啊，自动导入啊

有机会可以写一篇高级教程

😋😎

参考

https://nuxt.com/docs/getting-started/state-management

https://nuxt.com/docs/api/composables/use-state

https://juejin.cn/post/7193305766692913189

https://vueuse.org/